<!-- 示例模板 -->
<template>
    <div class="e-table">
        <div class="top">
            <div class="left">
                <div>
                    <el-button
                        size="small"
                        style="background: #7aa818; color: #fff"
                        >新增</el-button
                    >
                </div>
                <div>进入批量管理</div>
            </div>
            <div class="right">
                <div>
                    <el-input
                        placeholder="输入项目编号"
                        suffix-icon="el-icon-search"
                        v-model="input1"
                        size="small"
                    >
                    </el-input>
                </div>
                <div>
                    <el-button
                        size="small"
                        style="background: #2e61d7; color: #fff"
                        @click="dialogVisible = true"
                        >高级搜索</el-button
                    >
                </div>
            </div>
        </div>
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            @cell-mouse-enter="cellMouseEnter"
            @cell-mouse-leave="cellMouseLeave"
            :cell-class-name="cellClsNm"
        >
            <el-table-column type="selection" width="200"> </el-table-column>
            <el-table-column prop="a" label="项目名称" width="200">
            </el-table-column>
            <el-table-column prop="b" label="项目编号" width="200">
            </el-table-column>
            <el-table-column prop="c" label="承建单位" width="200">
            </el-table-column>
            <el-table-column prop="d" label="合同金额" width="200">
            </el-table-column>
            <el-table-column prop="e" label="预算编制机构" width="200">
            </el-table-column>
            <el-table-column prop="f" label="预算金额" width="200">
            </el-table-column>
            <el-table-column label="状态" width="200">
                <template slot-scope="scope">
                    <span v-if="scope.row.g == '0'" style="color: #e85442"
                        >未审核</span
                    >
                    <span v-if="scope.row.g == '1'" style="color: #4773db"
                        >审核中</span
                    >
                    <span v-if="scope.row.g == '2'" style="color: #979797"
                        >已审核</span
                    >
                </template>
            </el-table-column>
            <!-- fixed="right" -->
            <el-table-column label="" width="100" v-if="MouseEnterId != 0">
                <template slot-scope="scope">
                    <i
                        class="el-icon-edit"
                        style="
                            margin-left: 30px;
                            cursor: pointer;
                            font-size: 20px;
                        "
                        v-if="MouseEnterId == scope.row.id"
                    ></i>
                </template>
            </el-table-column>
        </el-table>
        <Epagination />
        <!-- mask -->
        <el-dialog
            title="高级搜索"
            :visible.sync="dialogVisible"
            width="40%"
            :modal="false"
        >
            <div class="item">
                <span>机构</span>
                <el-input
                    v-model="input1"
                    placeholder="请输入内容"
                    size="mini"
                ></el-input>
            </div>
            <div class="item">
                <span>计划日期</span>
                <el-date-picker v-model="value1" size="mini"> </el-date-picker>
                <span class="separate">—</span>
                <el-date-picker arrow-control v-model="value2" size="mini">
                </el-date-picker>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" style="background: #7aa818; color: #fff"
                    >重置</el-button
                >
                <el-button size="mini" style="background: #2e61d7; color: #fff"
                    >确定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Epagination from '@/components/pagination/pagination.vue'
export default {
    data () {
        return {
            input1: '',
            value1: '',
            value2: '',
            dialogVisible: false,
            MouseEnterId: 0,
            tableData: [
                {
                    id: 1,
                    a: '项目名称',
                    b: '王小虎',
                    c: '上海市普陀区金沙江路 1518 弄',
                    d: 'd',
                    e: 'e',
                    f: 'f',
                    g: '0'
                },
                {
                    id: 2,
                    a: '项目名称',
                    b: '王小虎',
                    c: '上海市普陀区金沙江路 1518 弄',
                    d: 'd',
                    e: 'e',
                    f: 'f',
                    g: '1'
                },
                {
                    id: 3,
                    a: '项目名称',
                    b: '王小虎',
                    c: '上海市普陀区金沙江路 1518 弄',
                    d: 'd',
                    e: 'e',
                    f: 'f',
                    g: '2'
                },
                {
                    id: 4,
                    a: '项目名称',
                    b: '王小虎',
                    c: '上海市普陀区金沙江路 1518 弄',
                    d: 'd',
                    e: 'e',
                    f: 'f',
                    g: '2'
                }
            ]
        }
    },
    components: {
        Epagination
    },
    methods: {
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-right'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        }
    }
}
</script>

<style lang="scss" scoped></style>
